<template>
  <codemirror ref="codeRef" :value="code" :options="options" @input="codeChange"></codemirror>
</template>

<script>
import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'

import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-light.css'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/css/css'

Vue.use(VueCodemirror)
export default {
  name: "CodeVisible",
  props:{
    code:{
      type:String,
      default:''
    },
    readOnly:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return {
      options:{
        mode:'text/x-vue',
        tabSize:2,
        lineNumbers:true,
        line:true,
        theme:'base16-light',
        readOnly: this.readOnly
      }
    }
  },
  methods:{
    codeChange(code){
      this.$emit('change',code)
    }
  }
}
</script>
